<!-- 在这个文件对每个tab对应的列表进行渲染 -->
<template>
	<view class="parent">
		<!--  :enable-back-to-top="currentIndex===tabIndex" 在微信小程序上可以多加这一句，因为默认是允许点击返回顶部的，但是这个页面有多个scroll-view，会全部返回顶部，所以需要控制是当前index才允许点击返回顶部 -->
		<!-- 如果当前页已经加载过数据或者当前切换到的tab是当前页，才展示当前页数据（懒加载） -->
		<z-paging v-if="firstLoaded || isCurrentPage" ref="paging" v-model="dataList" @query="queryList" :fixed="false">
			<view class="tab1" v-for="(item, index) in dataList" :key="index" @click="itemClick(item, true)" v-if="tabIndex==0">
				<view class="left">
					<image :src="item.usericon" mode="aspectFill"></image>
				</view>
				<view class="item-content">
					<view class="content-top">
						<view class="title">{{item.usernick}}</view>
						<image v-if="1==item.isReal && 2==item.usersex" :src="getImageUrl('ic_zhenren_gril.png')"
						mode="heightFix" style="height: 30rpx; margin-left: 10rpx;"  ></image>
						<image v-if="1==item.isReal && 1==item.usersex" :src="getImageUrl('ic_zhenren_boy.png')"
						mode="heightFix" style="height: 30rpx; margin-left: 10rpx;"  ></image>
						<!-- <image v-if="0==item.onlinestatus" mode="heightFix" style="height: 30rpx; margin-left: 10rpx;" :src="getImageUrl('ic_online.png')"></image> -->
					</view>
					<view class="sub-title">{{getInfo(item)}}</view>
					<view class="three">{{item.mysign}}</view>
					<view class="online">
						<view class="type1" v-if="item.online>4">
							<view class="dot"></view>
							<view style="color: #555;">{{item.online}}分前在线</view>
						</view>
						<view class="type2" v-else>
							<view class="dot"></view>
							<view style="color: #fff;">在线</view>
						</view>
					</view>
				</view>
				<view style="display: flex; flex-direction: column; align-items: center; justify-content: flex-end;" >
					<image :src="getImageUrl('home_dazhaohu.png')" style="width: 100rpx; height: 50rpx;" mode="heightFix" @click.stop="toChat(item)"></image>
					<view class="distance">
						<image
							src="https://zhiyuapp.oss-cn-fuzhou.aliyuncs.com/uniapp_android/image/lalaq/ic_location_blue.png">
						</image>
						<text style="color: #555;font-size: 22rpx;">{{item.distance}}km</text>
					</view>
				</view>
			</view>
			
			<view class="tab2">
				<view class="item-container"  v-for="(item, index) in dataList" :key="index" @click="itemClick(item, false)" v-if="tabIndex==1">
					<image :src="item.usericon" mode="aspectFill"></image>
					<view style="display: flex; flex-direction: row; align-items: center; margin: 0 10rpx;">
						<view style="flex:1;">
							<view class="nick">
								<view class="nick-title">{{item.usernick}}</view>
								<image v-if="1==item.isReal && 2==item.usersex" mode="heightFix" style="height: 30rpx; margin-left: 10rpx;" :src="getImageUrl('ic_zhenren_gril.png')"></image>
								<image v-if="1==item.isReal && 1==item.usersex" mode="heightFix" style="height: 30rpx; margin-left: 10rpx;" :src="getImageUrl('ic_zhenren_boy.png')"></image>
								<image v-if="0==item.onlinestatus" mode="heightFix" style="height: 30rpx; margin-left: 10rpx;" :src="getImageUrl('ic_online.png')"></image>
							</view>
							<view class="info">{{getInfo2(item)}}</view>
						</view>
						<view class="chat">
							<image :src="getImageUrl('home_dazhaohu2.png')" style="width: 50rpx; height: 50rpx; margin-right: 10rpx;" mode="heightFix" @click.stop="toChat(item)"></image>
						</view>
					</view>
					
					<view class="address" v-if="item.address">
						<image :src="getImageUrl('ic_map_white.png')" style="width: 22rpx;" mode="widthFix"></image>
						<view >{{item.address}}</view>
					</view>
					<view class="sex">
						<view class="sex-girl" v-if="2==item.usersex">
							<image :src="getImageUrl('ic_sex_girl_white.png')" style="width: 22rpx;" mode="widthFix"></image>
							<view>{{item.age}}</view>
						</view>
						<view class="sex-boy" v-if="1==item.usersex">
							<image :src="getImageUrl('ic_sex_boy_white.png')" style="width: 22rpx;" mode="widthFix"></image>
							<view>{{item.age}}</view>
						</view>
					</view>
					
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import { TUIConversationService} from "@tencentcloud/chat-uikit-engine";
	import constant from '@/common/constant.js'
	import IMUtil from "@/main/common/IMUtil.js";
	
	export default {
		data() {
			return {
				//v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
				dataList: [],
				//当前组件是否已经加载过了
				firstLoaded: false,
				//是否滚动到当前页
				isCurrentPage: false,
				city:'',
			}
		},
		onLoad() {
			this.requestCity()
			uni.$on('requestHome',function(data){
				this.queryList(1, 20);
			})
		},
		onUnload() {
			uni.$off('requestHome')
		},
		props:{
			//当前组件的index，也就是当前组件是swiper中的第几个
			tabIndex: {
				type: Number,
				default: function(){
					return 0
				}
			},
			//当前swiper切换到第几个index
			currentIndex: {
				type: Number,
				default: function(){
					return 0
				}
			}
		},
		watch: {
			currentIndex: {
				handler(newVal) {
					if(newVal === this.tabIndex){
						//懒加载，当滑动到当前的item时，才去加载
						if(!this.firstLoaded){
							// 这里需要延迟渲染z-paging的原因是为了避免在一些平台上立即渲染可能引发的底层报错问题
							this.$nextTick(() => {
								setTimeout(() => {
									this.isCurrentPage = true;
								}, 100);
							})
						}
					}
				},
				immediate: true
			},
		},
		methods: {
			async queryList(pageNo, pageSize) {
				const params = {
					pageno: pageNo,
					gender: 1,
					type: this.tabIndex + 1
				}
				let res = await this.$common.get("/appfujinren/recommentList", params);
				if(0 == res.code){
					let list = res.data
					if (this.tabIndex == 0) {
						let userDistanceList = uni.getStorageSync('userDistance');
						if (!userDistanceList) {
							userDistanceList = [];
						}
						list.forEach(item => {
							let flag = true;
							if (!this.hasCacheDistance(userDistanceList, item)) {
								item.distance = (Math.random() * (20 - 0.2) + 0.2).toFixed(1);
								item.online = Math.floor(Math.random() * 30) + 1;
								let data = {
									userId: item.userid,
									distance: item.distance,
									nick: item.usernick,
									online: item.online,
									time: new Date().getTime()
								}
								userDistanceList.push(data);
							}
						});
						uni.setStorageSync('userDistance', userDistanceList);
					}
					//
					this.$refs.paging.complete(list);
					this.firstLoaded = true;
				}else{
					this.$refs.paging.complete(false);
				}
			},
			
			hasCacheDistance(userDistanceList, item) {
				let flag = false
				userDistanceList.forEach(data => {
					if (item.userid == data.userId) {
						item.distance = data.distance;
						item.online = data.online;
						let now = new Date().getTime();
						let old = data.time;
						if ((now - old) > 1000 * 60 * 20) {
							item.distance = (Math.random() * (20 - 0.2) + 0.2).toFixed(1);
							item.online = Math.floor(Math.random() * 30) + 1;
							data.time = now;
							data.distance = item.distance;
							data.online = item.online;
						}
						flag = true;
					}
				});
				return flag;
			},
			getInfo(item){
				let info = item.age + "岁";
				if(item.shengao){
					info += " | "+item.shengao;
				}
				if(item.tizhong){
					info += " | "+item.tizhong;
				}
				if(item.zhiyename){
					info += " | "+item.zhiyename;
				}
				return info;
			},
			getInfo2(item){
				let info = item.age + "岁";
				if(item.shengao){
					info += " | "+item.shengao;
				}
				if(item.tizhong){
					info += " | "+item.tizhong;
				}
				return info;
			},
			showAddress(item){
				if(item.address){
					return true;
				}else{
					return false;
				}
			},
			
			itemClick(item, sameCity) {
				uni.navigateTo({
					url:'/main/user/info/info?txCode='+ item.userid+'&sameCity='+sameCity
				});
			},
			toChat(item){
				IMUtil.toChat(item.texcode)
			},
			async requestCity() {
				let res = await this.$common.post('/api/ipGetAddress/getAddress');
				if (res.code == 0) {
					const result = res.data.data.result;
					let city = res.data.data.result.city;
					uni.setStorageSync('city', city)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	/* 注意:父节点需要固定高度，z-paging的height:100%才会生效 */
	.parent {
		height: 100%;
		
		.tab1{
			display: flex;
			flex-direction: row;
			width: 100wh;
			box-sizing: border-box;
			background-color: white;
			border-radius: 10rpx;
			margin: 20rpx;
			padding: 20rpx;
			align-items: center;
			.left{
				width: 120rpx;
				height: 120rpx;
				image{
					width: 120rpx;
					height: 120rpx;
					border-radius: 10rpx;
				}
			}
			.item-content{
				display: flex;
				flex-direction: column;
				margin-left: 20rpx;
				width: 450rpx;
				.content-top{
					display: flex;
					flex-direction: row;
					align-items: center;
					font-size: 32rpx;
					color: #222;
					.title{
						font-size: 32rpx;
						color: #222;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
				.sub-title{
					font-size: 24rpx;
					color: #666;
					margin-top: 15rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.three{
					font-size: 24rpx;
					color: #888;
					margin-top: 15rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	
		.tab2{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			width: 100%;
			margin: 0 10rpx;
			.item-container{
				position: relative;
				display: flex;
				flex-direction: column;
				width: 345rpx;
				box-sizing: border-box;
				background-color: #fff;
				border-radius: 10rpx;
				margin: 10rpx;
				
				image{
					width: 100%;
					height: 438rpx;
					border-radius: 10rpx;
				}
				.nick{
					margin: 15rpx 15rpx 0 15rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					.nick-title{
						font-size: 28rpx;
						color: #222;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
				.info{
					margin: 15rpx;
					font-size: 22rpx;
					color: #555;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.address{
					position: absolute;
					top: 10rpx;
					left: 10rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					font-size: 20rpx;
					color: #fff;
				}
				.sex{
					position: absolute;
					top: 10rpx;
					right: 10rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					font-size: 15rpx;
					color: #fff;
					.sex-girl {
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						background-color: #fa6adc;
						border-radius: 100rpx;
						padding: 0 10rpx;
						height: 35rpx;
					}
					.sex-boy {
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						background-color: #007AFF;
						border-radius: 100rpx;
						padding: 0 10rpx;
						height: 35rpx;
					}
					.chat{
						position: absolute;
						bottom: 0;
						right: 0;
					}
				}
			}
		}
	}
	
	.distance {
		display: flex;
		flex-direction: row;
		font-size: 22rpx;
		align-items: center;
		margin-top: 20rpx;
	
		image {
			width: 23rpx;
			height: 23rpx;
		}
	}
	
	.online {
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 20rpx;
		
		.type1{
			display: flex;
			flex-direction: row;
			align-items: center;
			.dot {
				width: 18rpx;
				height: 18rpx;
				background-color: limegreen;
				border-radius: 50%;
				margin-right: 5rpx;
			}
		}
		.type2{
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 5rpx 10rpx;
			background-color: limegreen;
			border-radius: 100rpx;
			.dot {
				width: 18rpx;
				height: 18rpx;
				background-color: #fff;
				border-radius: 50%;
				margin-right: 5rpx;
			}
		}
	}
	
	
	
</style>
